<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width:400px;
            height:auto;
            margin:0 auto;
            display:block;
            transition:all 3s;
        }
        img:hover{
            -webkit-filter:none;
        }
       
        .c1{/*灰色度*/
            -webkit-filter:grayscale(1);
          
        }
        .c3{/*亮度
            1:正常    2：曝光     0：黑
        */
            -webkit-filter:brightness(0);
        }
        .c2{/*褐色
            1:百分百        0：正常
        */
            -webkit-filter:sepia(1);
        }
        .c4{/*亮度
            1:正常    2：曝光     0：黑
        */
            -webkit-filter:brightness(2);
        }
        .c5{/*模糊度*/
            -webkit-filter:blur(10px);
        }
        .c6{/*对比度
        1：正常   0：灰色   2：对比
        */
            -webkit-filter:contrast(2);
        }
        .c7{/*胶片
        1：胶片 0：正常  
        */
            -webkit-filter:invert(1);
        }
       
    </style>
</head>
<body>
    <form action="https://www.baidu.com/s" method="get">
        <input type="text" name="wd" placeholder="请输入搜索内容">
        <input type="submit" value="搜索">
    </form>
    <h2>肖战</h2>
    <div>
        <img src="img/03.jpg" alt="小哥哥暂且走丢了..." class="c1">
        <img src="img/01.jpg" alt="小哥哥暂且走丢了..."class="c2">
        <img src="img/02.jpg" alt="小哥哥暂且走丢了..."class="c3">
        <img src="img/04.jpg" alt="小哥哥暂且走丢了..."class="c4">
        <img src="img/05.jpg" alt="小哥哥暂且走丢了..."class="c5">
        <img src="img/06.jpg" alt="小哥哥暂且走丢了..."class="c6">
        <img src="img/07.jpg" alt="小哥哥暂且走丢了..."class="c7">
    </div>
</body>
</html>